<template>
  <section style="padding-bottom: 30px;height: 100%;">
    <div style="position: relative;text-align: left;padding: .3rem;">
      <yd-button type="primary" @click.native="getPdfBtn()" style="width: 80px;height: 30px;background: #62b900;">下载报告
      </yd-button>
    </div>

    <div id="pdfDom">
      <div style="padding: 40px 20px 200px 20px;overflow: auto;">
        <p style="font-size: 26px;text-align: center;">火炬数据风险审核报告</p>
        <div class="ru_t">
          <p>
            <span>报告编号</span>
            <span>{{r_out_trade_no}}</span>
          </p>
          <p>
            <span>报告生成时间</span>
            <span>{{rtime}}</span>
          </p>
          <p>
            <span>风险扫描</span>
            <span style="color: red;">共发现{{rcount}}条异常信息</span>
          </p>
        </div>
        <p class="r_tit">用户基本信息</p>
        <ul class="r_ul">
          <li style="margin-top: 18px;">
            <span>姓名</span>
            <span>{{rname}}</span>
          </li>
          <li>
            <span>性别</span>
            <span>{{rsex}}</span>
          </li>
          <li>
            <span>年龄</span>
            <span>{{rage}}</span>
          </li>
          <li>
            <span>出生日期</span>
            <span>{{rbirth}}</span>
          </li>
          <li>
            <span>身份证号</span>
            <span>{{rcode}}</span>
          </li>
          <li>
            <span>籍贯</span>
            <span>{{rcity}}</span>
          </li>
          <li>
            <span>手机号</span>
            <span>{{rphone}}</span>
          </li>
          <li>
            <span>手机号运营商</span>
            <span>{{risp}}</span>
          </li>
          <li>
            <span>手机号归属地</span>
            <span>{{raddress}}</span>
          </li>
          <img :src="rphoto" class="r_head">
        </ul>

        <p class="r_tit" style="margin-top: 30px">检测结果</p>
        <table style="width: 100%;" cellspacing="0">
          <thead>
          <th style="width: 34%">检测项</th>
          <th style="width: 33%">检测结果</th>
          <th style="width: 33%">风险详情</th>
          </thead>
          <tbody>
          <tr v-for="(item,index) in listInfo" :key="index">
            <td style="text-align: left;padding-left: 60px;">{{item.one}}</td>
            <td v-if="item.two=='命中'" style="color: red;">{{item.two}}</td>
            <td v-else>{{item.two}}</td>
            <td>
              <pre v-html="item.three"></pre>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    name: "riskReportResult",
    data() {
      return {
        htmlTitle: '风险审核报告',
        listInfo: [],
        rname: '',
        rsex: '',
        rage: '',
        rbirth: '',
        rcode: '',
        rcity: '',
        rphone: '',
        r_out_trade_no: '',
        rtime: '',
        rcount: '',
        rphoto: require('../../assets/mine/no_pic.png'),
        risp: '',
        raddress: '',
      }
    },
    methods: {
      getPdfBtn() {
        const that = this;
        var ua = navigator.userAgent.toLowerCase();
        that.$dialog.loading.open('正在获取下载链接');
        this.getPdf().then(function (result) {
          that.$ajax.post(window.g.apiUrl+'/file/getPdf.do', JSON.stringify({
            file: result,
            code: that.r_out_trade_no,
          })).then((response) => {
            that.$dialog.loading.close();
            if (response.data.code == 200 && response.data.data != '') {
              if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) && ua.indexOf('micromessenger') != -1) {
                sessionStorage.setItem('PNGURL', response.data.data);
                that.$router.push('/ios_detail');
              } else {
                window.location.href = response.data.data;
              }
            } else {
              that.$dialog.notify({
                mes: '下载失败，请稍后重试',
                timeout: 1500,
              });
            }

          })
        })


      }
    },
    created() {
      let obj = JSON.parse(sessionStorage.getItem('TO_OBJECT'));
      this.rname = obj.userInfo.name;
      this.rsex = obj.userInfo.sex;
      this.rage = obj.userInfo.age;
      this.rbirth = obj.userInfo.birth;
      this.rcode = obj.userInfo.idCard;
      this.rcity = obj.userInfo.city;
      this.rphone = obj.userInfo.mobile;
      this.r_out_trade_no = obj.userInfo.out_trade_no;
      this.rtime = obj.userInfo.time;
      this.rcount = obj.userInfo.count;
      this.risp = obj.userInfo.isp == '' ? '未知' : obj.userInfo.isp;
      this.raddress = obj.userInfo.attribution == '' ? '未知' : obj.userInfo.attribution;
      if (obj.userInfo.photo == '' || obj.userInfo.photo == undefined) {
        this.rphoto = require('../../assets/mine/no_pic.png');
      } else {
        this.rphoto = 'data:image/jpg;base64,' + obj.userInfo.photo;
      }
      this.listInfo = obj.infoList;
    }
  }
</script>

<style scoped>
  .ru_t {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .ru_t p {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 30px;
  }

  .ru_t p > span {
    margin-bottom: 10px;
  }

  .r_head {
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    height: 187px;
  }

  .r_tit {
    width: 100%;
    background: #E72A26;
    color: #fff;
    text-align: left;
    padding: 5px 0 5px 20px;
    -webkit-text-size-adjust: none;
  }

  th, td {
    border: solid #f2f2f2;
    padding: 8px 0;
    border-width: 0px 1px 1px 0px;
  }

  table {
    border-left: 1px solid #f2f2f2;
  }

  pre {
    display: flex;
    justify-content: center;
    text-align: left;
    font-family: inherit;
    white-space: pre-wrap;
    padding: 0 5px;
    flex-flow: column;
    align-items: center;
  }

  .r_ul {
    border: 1px solid #f2f2f2;
    position: relative;
  }

  .r_ul li {
    list-style: none;
    display: flex;
    margin-bottom: 18px;
    width: 400px;
    padding-left: 20px;
  }

  .r_ul li span:nth-child(1) {
    width: 200px;
    text-align: left;
  }

  #pdfDom {
    width: 840px;
    background-image: url("../../assets/credit/bg2.jpg");
    background-size: 100% auto;
  }

</style>
